<template>
  <!-- 公告 -->
  <van-notice-bar
    left-icon="volume-o"
    text="2020年12月25日，别墅活动！400元/人"
  />
  <!-- 轮播 -->
  <van-swipe :autoplay="3000" height="200">
    <van-swipe-item v-for="(image, index) in images" :key="index">
      <img v-lazy="image" class="w-banner-img" />
    </van-swipe-item>
  </van-swipe>
  <!-- 详情 -->
  <van-divider
    :style="{ color: '#f1823d', borderColor: '#f1823d', padding: '0 16px' }"
  >
    别墅内景
  </van-divider>
  <!-- 图片列表 -->
  <img src="../assets/inner_01.jpeg" alt="别墅内景详情" class="w-inner-img" @click="showPreview(1)">
  <img src="../assets/inner_02.jpeg" alt="别墅内景详情" class="w-inner-img" @click="showPreview(2)">
  <img src="../assets/inner_03.jpeg" alt="别墅内景详情" class="w-inner-img" @click="showPreview(3)">
  <img src="../assets/inner_04.jpeg" alt="别墅内景详情" class="w-inner-img" @click="showPreview(4)">
  <img src="../assets/inner_05.jpeg" alt="别墅内景详情" class="w-inner-img" @click="showPreview(5)">
  <img src="../assets/inner_06.jpeg" alt="别墅内景详情" class="w-inner-img" @click="showPreview(6)">
  <img src="../assets/inner_07.jpeg" alt="别墅内景详情" class="w-inner-img" @click="showPreview(7)">
  <img src="../assets/inner_08.jpeg" alt="别墅内景详情" class="w-inner-img" @click="showPreview(8)">
  <!-- 地址 -->
  <van-divider
    :style="{ color: '#f1823d', borderColor: '#f1823d', padding: '0 16px' }"
  >
    地址
  </van-divider>
  <div class="w-address-name">
    广东省广州市从化区方圆明月山溪
  </div>
  <!-- 图片预览 -->
</template>

<script>
// 轮播
import banner_01 from '../assets/banner_01.jpeg'
import banner_02 from '../assets/banner_02.jpeg'
import banner_03 from '../assets/banner_03.jpeg'
// 内景
import inner_01 from '../assets/inner_01.jpeg'
import inner_02 from '../assets/inner_02.jpeg'
import inner_03 from '../assets/inner_03.jpeg'
import inner_04 from '../assets/inner_04.jpeg'
import inner_05 from '../assets/inner_05.jpeg'
import inner_06 from '../assets/inner_06.jpeg'
import inner_07 from '../assets/inner_07.jpeg'
import inner_08 from '../assets/inner_08.jpeg'
import { ImagePreview } from "vant"
export default {
  name: 'Home',
  data() {
    return {
      show: false, // 是否显示图片预览
      index: 0, // 预览下标
      previewImages: [
        inner_01,
        inner_02,
        inner_03,
        inner_04,
        inner_05,
        inner_06,
        inner_07,
        inner_08
      ],
      images: [
        banner_01,
        banner_02,
        banner_03
      ],
    }
  },
  methods: {
    showPreview (index) {
      console.log(index, "index")
      ImagePreview({
        images: [
        inner_01,
        inner_02,
        inner_03,
        inner_04,
        inner_05,
        inner_06,
        inner_07,
        inner_08
      ],
        startPosition: index - 1,
      })
    },
    onChange (index) {
      this.index = index
    }
  }
}
</script>
<style>
.w-banner-img {
  width: 750px;
  height: 200px;
}
.w-inner-img {
  display: block;
  margin: auto;
  width: 92%;
}
.w-address-name {
  font-size: 16px;
  margin-bottom: 20px;
  color: #262626;
}
</style>
